<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        svg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
        .pour {
            -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            transform: translateY(-100%);
            -webkit-animation: pourDown 2s forwards;
            -ms-animation: pourDown 2s forwards;
            animation: pourDown 2s forwards;
        }
        .fill {
            -webkit-transform: translateY(25%);
            -ms-transform: translateY(25%);
            transform: translateY(25%);
            -webkit-animation: 1s fillUp 0.4s forwards;
            -ms-animation: 1s fillUp 0.4s forwards;
            animation: 1s fillUp 0.4s forwards;
        }
        @-webkit-keyframes pourDown {
            100% {
                -webkit-transform: translateY(100%);
                -ms-transform: translateY(100%);
                transform: translateY(100%);
            }
        }
        @keyframes pourDown {
            100% {
                -webkit-transform: translateY(100%);
                -ms-transform: translateY(100%);
                transform: translateY(100%);
            }
        }
        @-webkit-keyframes fillUp {
            100% {
                -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                transform: translateY(0);
            }
        }
        @keyframes fillUp {
            100% {
                -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">

    <defs>
        <clipPath id="mask">
            <path d="M191.6,260.9c-5.8,8.6-20.1,13.1-41.4,13.1H150c-21.2,0-35.4-4.5-41.2-13.1c-5.6-8.4-1.9-18.9-1.6-19.6
      l30.8-71V128h25v42.2l30.2,71C193.4,241.8,197.3,252.5,191.6,260.9z" />
            <path d="M191.6,260.9c-5.8,8.6-20.1,13.1-41.4,13.1H150c-21.2,0-35.4-4.5-41.2-13.1c-5.6-8.4-1.9-18.9-1.6-19.6
        l30.8-71V128h25v42.2l30.2,71C193.4,241.8,197.3,252.5,191.6,260.9z" />
            <rect x="124" width="52" height="118" />
        </clipPath>
    </defs>

    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://3fe6ec52d4af011a8ce5-e88f5ccb994ee9cbb38cb1b572dfdc83.r67.cf1.rackcdn.com/beaker.svg" width="100%" height="100%" />

    <g clip-path="url(#mask)">
        <image class="pour" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://3fe6ec52d4af011a8ce5-e88f5ccb994ee9cbb38cb1b572dfdc83.r67.cf1.rackcdn.com/pour.svg" width="100%" height="100%" />
        <image class="fill" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://3fe6ec52d4af011a8ce5-e88f5ccb994ee9cbb38cb1b572dfdc83.r67.cf1.rackcdn.com/fill.svg" width="100%" height="100%" />
    </g>

    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://3fe6ec52d4af011a8ce5-e88f5ccb994ee9cbb38cb1b572dfdc83.r67.cf1.rackcdn.com/beaker-lines.svg" width="100%" height="100%" />

</svg>
</body>
</html>